<template>
  <div class="communication-reg-history">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-body am-fr am-form tpl-form-border-form">
          <div class="am-form-group am-u-lg-12">
            <label class="am-u-sm-1 am-form-label ex-label">沟通日期：
            </label>
            <div class="am-u-sm-3 am-u-end input-field">
              <el-date-picker
                v-model="communicateTime"
                type="daterange"
                placeholder="沟通日期"
              >
              </el-date-picker>
            </div>
            <div class="am-u-sm-3 am-u-md-3 am-u-end">
              <button
                @click="search"
                type="button"
                class="btn-search am-btn am-btn-default am-btn-success"
              >
                <span class="am-icon-search"></span>查询
              </button>
            </div>
          </div>

          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              empty-text="暂无数据"
              style="min-width: 100%"
            >
              <el-table-column
                align="center"
                label="沟通形式"
                min-width="100"
              >
                <template scope="scope">
                  {{ way[scope.row.way] }}
                </template>
              </el-table-column>
              <el-table-column
                label="续读意愿"
                align="center"
                min-width="100"
              >
                <template scope="scope">
                  {{ continueRead[scope.row.continueRead] }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="下次沟通时间"
                min-width="100"
              >
                <template scope="scope">
                  {{scope.row.nextCommunicateDate | formatDate }}
                </template>
              </el-table-column>
              <el-table-column
                label="沟通人"
                align="center"
                prop="seniorName"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="沟通时间"
                min-width="100"
              >
                <template scope="scope">
                  {{scope.row.communicateDate | formatDate }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="沟通内容"
                prop="communicateContent"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                min-width="100"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click.native="check(scope.row.regRecord)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="query.pageNo"
                v-bind:pageSize="query.pageSize"
                @paging="handleSearch"
              />
            </div>
          </div>

          <window
            ref="win"
            title="沟通历史"
          >
            <CommunicationTable ref="communicationTable"></CommunicationTable>
          </window>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
import Pagination from '../base/Pagination'
import moment from 'moment'
import CommunicationTable from './CommunicationTable'
export default {
  data() {
    return {
      tableData: [],
      query: {
        studentId: '',
        startCommunicateDate: '',
        endCommunicateDate: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      way: {
        '0': '电话拨入',
        '1': '电话拨出',
        '2': '面谈',
        '3': '微信/QQ',
        '4': '其他',
        '5': '电话'
      },
      continueRead: {
        '0': '强烈',
        '1': '一般',
        '2': '无意愿',
        '3': '确定续报',
        '4': '考虑中',
        '5': '不续报'
      },
      communicateTime: ''
    }
  },
  watch: {
    communicateTime(newVal) {
      this.query.startCommunicateDate = newVal[0]
        ? this.$options.filters.formatDate(newVal[0])
        : ''
      this.query.endCommunicateDate = newVal[1]
        ? this.$options.filters.formatDate(newVal[1])
        : ''
    }
  },
  components: {
    Pagination,
    CommunicationTable
  },
  methods: {
    handleSearch(pageNo) {
      this.query.pageNo = pageNo || this.query.pageNo || 1
      io.post(io.communicateHistory, this.query, ret => {
        if (ret.success) {
          this.tableData = ret.data.list
          this.total = ret.data.total
        }
      })
    },
    search() {
      this.query.pageNo = 1
      this.handleSearch()
    },
    check(regRecord) {
      this.$refs.communicationTable.tableData = JSON.parse(regRecord)
      this.$refs.win.show({
        width: 1000,
        height: 500
      })
    },
    init() {
      this.query.studentId = this.$route.query.studentId
      this.handleSearch()
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })

    this.$root.$on('updataHistory', () => {
      this.init()
    })
  }
}
</script>
<style lang="less" scoped>
.communication-reg-history {
  .ex-label {
    text-align: left;
    width: auto;
    padding-left: 0;
    padding-right: 5px;
  }
}
</style>
